<template>
  <div class="image">
    <el-image
        :src="$withBase(src)"
        :preview-src-list="imgList"
        :zoom-rate="1.0"
        :initial-index="0"
        fit="cover"
        lazy
    ></el-image>
  </div>
</template>

<script>
export default {
  name: 'Img',
  props: {
    src: {
      type: String,
      default: ''
    },
    list: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  computed: {
    imgList: function () {
      const list = this.list.length > 0 ? this.list : [this.src]
      for (let i = 0; i<list.length;i++) {
        list[i] = this.$withBase(list[i])
      }
      return list

    }
  }
}
</script>

<style lang="stylus" scoped>
.image {
  .el-image {
    border 1px solid #3eaf7c
    border-radius 10px
    padding 8px;
  }
}
</style>
